<!--
 * @Author: your name
 * @Date: 2020-12-28 14:33:04
 * @LastEditTime: 2020-12-28 14:33:04
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: /vue-next/Users/duodian/Documents/qugame/work-admin/src/views/setting/users.vue
-->
<template>
  <div class="users-list">
    <div class="input-box">
      <el-input
          placeholder="请输入您要搜索的用户"
          clearable
          @keyup.enter.native="getList(1)"
          style="width:240px;"
          v-model.trim="keyword">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
  </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
            width="80"
            label="用户ID">
            <template slot-scope="scope">
                <div class="item-td">{{scope.row.id}}</div>
            </template>
        </el-table-column>
        <el-table-column
            label="姓名">
            <template slot-scope="scope">
                <div class="item-td">{{scope.row.name}}</div>
            </template>
        </el-table-column>
        <el-table-column
            width="150"
            label="邮箱">
            <template slot-scope="scope">
                <div class="item-td">{{scope.row.email}}</div>
            </template>
        </el-table-column>

        <el-table-column
            width="120"
            label="手机号">
            <template slot-scope="scope">
                <div class="item-td">{{ scope.row.phone }}</div>
            </template>
        </el-table-column>

        <el-table-column
            width="120"
            label="所在用户组">
            <template slot-scope="scope">
              <div class="item-td" v-for="item in scope.row.roleInfoVoList" :key="item.roleId">{{ item.roleName }}</div>
            </template>
        </el-table-column>

        <el-table-column
            label="状态">
            <template slot-scope="scope">
                <div class="item-td" :style="{ 'color': scope.row.status === 0 ? 'red' : scope.row.status === 1 ? '#67C23A' : '#606266'}">{{ statusValue[scope.row.status] }}</div>
            </template>
        </el-table-column>

        <el-table-column
            label="创建时间">
            <template slot-scope="scope">
                <div class="item-td">{{ _formatDate(scope.row.ctime) }}</div>
            </template>
        </el-table-column>

        <el-table-column
            width="160"
            fixed="right"
            label="操作">
            <template slot-scope="scope">
                <div class="item-td cz-item">
                    <div style="margin-bottom: 5px" v-if="scope.row.status === 0"><el-button @click="nouse(scope.row)" type="success" plain>启用</el-button></div>
                    <div style="margin-bottom: 5px" v-if="scope.row.status === 1"><el-button @click="nouse(scope.row)" type="danger" plain>禁用</el-button></div>
                    <div style="margin-bottom: 5px" v-if="scope.row.roleInfoVoList.length"><el-button @click="addUsersGroupShow(scope.row, true)" type="warning" plain>编辑用户组</el-button></div>
                    <div><el-button @click="addUsersGroupShow(scope.row, false)" type="primary" plain>添加到用户组</el-button></div>
                </div>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <div class="tools">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="_pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-drawer
      title="添加到/移除某个用户组"
      :visible.sync="visible"
      direction="rtl"
      :before-close="drawerHandleClose"
    >
      <div class="remove-group" v-if="showEdit">
        <div class="remove-list" v-for="(item, key) in editUserGroup" :key="key">
          <i class="el-icon-remove" @click="removeUsersGroupApi(item, key)"></i>
          <span>{{ item.roleName}}</span>
        </div>
      </div>
      <div v-if="!showEdit" style="position: relative">
        <div class="remove-group" style="border-bottom: 1px solid #f4f4f4" v-if="choosedGroups.length">
          <div class="remove-list" v-for="(item, key) in choosedGroups" :key="key">
            <i class="el-icon-remove" @click="removeUserGroups(item, key)"></i>
            <span>{{ item.roleName}}</span>
          </div>
        </div>
        <div class="remove-group">
          <div class="remove-list" v-for="(item, key) in groupList" :key="key">
            <i style="color: #409EFF" class="el-icon-circle-plus" @click="addUserGroups(item, key)"></i>
            <span>{{ item.roleName}}</span>
          </div>
        </div>
        <el-button style="position: absolute; right: 20px; bottom: -30px" type="success" @click="confirmAdd">确认添加</el-button>
      </div>
      
    </el-drawer>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'

export default {
    data () {
        return {
          keyword: '',
          tableData: [],
          pageNum: 1,
          pageSize: this._pageSize,
          total: 0,
          loading: false,
          statusValue: {
            '0': '禁用',
            '1': '正常使用',
            '2': '审核不通过',
            '3': '账号停用'
          },
          visible: false,
          userItem: null,
          editUserGroup: [],
          userId: null,
          groupList: [],
          choosedGroups: [],
          showEdit: false
        }
    },
    watch: {
    },
    created () {
      this.getList()
    },
    methods: {
      // 禁用和启用
      async nouse (item) {
        let res = await this.$http.post('/account/updateUserStatus', {
          status: item.status ? 0 : 1,
          userId: item.id
        })
        if (res.code === '0') {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getList()
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 获取用户组
      async getUserGroupList () {
        let params = {
          pageNum: 1,
          pageSize: 1000
        }
        let res = await this.$http.post('/account/findAdminRoles', params)
        this.loading = false
        if (res.code === '0') {
          this.groupList = res.data
          // 添加用户组
          this.groupList.forEach((item, index) => {
            this.choosedGroups.forEach((c) => {
              if (item.roleName === c.roleName) {
                this.groupList.splice(index, 1)
              }
            })
          })
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      addUserGroups(item, index) {
        this.choosedGroups.push(item)
        this.groupList.splice(index, 1)
      },
      removeUserGroups(item, index) {
        this.groupList.push(item)
        this.choosedGroups.splice(index, 1)
      },
      // 确认添加到多个用户组
      async confirmAdd() {
        let roleIds = []
        this.choosedGroups.forEach((item) => {
          roleIds.push(item.roleId)
        })
        let params = {
          roleIds,
          userId: this.userId
        }
        let res = await this.$http.post('/account/addUserToRoles', params)
        if (res.code === '0') {
          this.$message({
              type: 'success',
              message: '添加成功'
          })
          this.visible = false
          this.getList()
          return
        }
        this.$message({
            type: 'error',
            message: res.desc
        })
      },
      drawerHandleClose() {
        this.visible = false
      },
      // 添加编辑用户组
      addUsersGroupShow (item, flag) {
        this.visible = true
        this.editUserGroup = item.roleInfoVoList || []
        this.choosedGroups = item.roleInfoVoList || []

        this.showEdit = false
        this.userId = item.id
        this.getUserGroupList()
        if (flag) {
          this.showEdit = true
        }
      },
      // 移除用户组 api 
      async removeUsersGroupApi (item, index) {
        let params = {
          roleId: item.roleId,
          userId: this.userId
        }
        let res = await this.$http.post('/account/deleteUserRole', params)
        if (res.code === '0') {
          this.$message({
              type: 'success',
              message: '移除成功'
          })
          this.editUserGroup.splice(index, 1)
          // 如果移除完了则关闭抽屉
          if (!this.editUserGroup.length) {
            this.visible = false
          }
          this.getList(1)
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 获取用户列表
      async getList(pageNum) {
        if (this.loading) return
        this.loading = true
        // this.pageNum = pageNum
        let params = {
          pageNum: pageNum || this.pageNum,
          pageSize: this.pageSize
        }
        if (this.keyword) {
          params.keyword = this.keyword
        }
        let res = await this.$http.post('/account/findAdminUsers', params)
        this.loading = false
        if (res.code === '0') {
          this.tableData = res.data
          this.total = res.count
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 页容切换
      sizeChange (num) {
          this.pageSize = num
          this.getList(1)
      },

      // 页码切换
      pageChange (num) {
          this.pageNum = num
          console.log(this.pageNum, 'this.pageNum')
          this.getList(this.pageNum)
      },

      _formatDate (val) {
        return formatDate(val, 'YYYY-MM-DD')
      }
    }
}
</script>
<style lang="scss" scoped>
  .cz-item {
    // text-align: center;
  }
  .remove-group {
    padding: 20px;
    .remove-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 5px 0px;
      i {
        margin-right: 10px;
        font-size: 16px;
        color: red;
        cursor: pointer;
      }
    }
  }
  .users-list {
    .input-box {
        margin-bottom: 20px;
        .btn {
            margin-left: 10px;
        }
    }
    .table-box {
      margin: 20px 0;
    }
    .tools {
        padding-right: 20px;
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
  }
</style>
